<template>
  <el-dialog
    width="700px"
    destroy-on-close
    append-to-body
    title="退款"
    :visible.sync="show"
    :before-close="cancel"
  >
    <el-form :model="form" ref="formRef" size="small" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('采购数量')" prop="type">
            <el-input
              disabled
              v-model="form.num"
              type="number"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="退款数量" prop="refundNum">
            <el-input v-model="form.refundNum" type="number" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="退款金额" prop="refundAmount">
            <el-input
              type="number"
              style="width: 100%"
              placeholder="请输入"
              v-model="form.refundAmount"
              class="input-with-select"
            >
              <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
              <el-button slot="append">
                <el-select style="width: 100px" v-model="form.refundAmountUnit">
                  <el-option label="RMB" :value="1" />
                  <el-option label="JPY" :value="2" />
                  <el-option label="USD" :value="3" />
                </el-select>
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="退款原因">
            <el-input v-model="form.refundReason" :rows="4" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t("关闭") }}
      </el-button>
      <el-button @click="handleSubmit" type="primary">
        <!-- 确认 -->
        {{ $t("确定") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { confirmRefund } from "@/api/purchasingManage/manufacturerPurchaseOrder";
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * 控制显示隐藏
     */
    formData: {
      type: Object,
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      rules: {
        receiveGoodsNum: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        refundNum: [{ required: true, message: "请输入", trigger: "blur" }],
        refundAmount: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.form = this.formData;
      }
    },
  },
  methods: {
    handleSubmit() {
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          confirmRefund(this.form).then((res) => {
            const { code, data, msg } = res;
            if (code === 200) {
              this.$message({ type: 'success', message: msg})
;
              this.cancel();
              this.$emit("close");
            }
          });
        }
      });
    },
    cancel() {
      this.$emit("update:show", false);
    },
  },
};
</script>
<style scoped lang="scss"></style>
